<%@page import="com.jfinal.kit.PropKit"%>
<%@ page language="java" contentType="text/html; charset=UTF-8"
	import="cn.com.dashihui.web.common.OrderCode" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="shiro" uri="http://shiro.apache.org/tags"%>
<!DOCTYPE html>
<html>
<head>
<title>会员管理</title>
<jsp:include page="../../include/header.jsp"></jsp:include>
<style type="text/css">
table th {
	text-align: center;
}

table td {
	text-align: center;
}

table {
	empty-cells: show;
	border-collapse: collapse;
	margin: 0 auto;
}

.col-lg-9 {
	width: 100%;
}

.pcc {
	width: 110px;
	height: 34px;
}

input {
	text-indent: 10px;
	border-radius: 5px;
}
/*排序 */
.querySort {
	position: relative;
}

.down {
	position: absolute;
	top: 12px;
	display: inline-block;
	width: 10px;
	height: 12px;
	margin-left: 8px;
	background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 61px;
}

.sort .querySort:NTH-OF-TYPE(2) .down {
	top: -3px;
	transform: rotateX(180deg);
}

.querySort:hover .down {
	background: url("${BASE_PATH}/static/images/sprite-arrow.png") 0 21px;
}

.downSort {
	position: absolute;
	top: 3px;
	left: 3px;
	width: 18px;
	height: 24px;
	opacity: 0;
	cursor: pointer;
}

.upSort {
	position: absolute;
	top: -15px;
	left: 3px;
	width: 18px;
	height: 24px;
	opacity: 0;
	cursor: pointer;
}
</style>
</head>
<body>
	<div id="wrapper" class="row">

		<div class="col-lg-12">
			<h1 class="page-header">积分统计</h1>
		</div>
		<!-- 搜索框 -->
		<div class="title-top col-lg-12">
			<label class="search-label">会员手机号：</label><input type="text"
				id="sPhone" value="" placeholder="手机号"
				class="form-control search-input width200" maxlength="21"> <label
				class="search-label">会员卡号：</label><input type="text" id="sCard"
				value="" placeholder="请输入会员卡号"
				class="form-control search-input width200" maxlength="21"> <label
				class="search-label">分公司：</label> <select id="sStore"
				class="selectpicker pull-left p-l-5" data-width="12%">
				<option value="">请选择分公司</option>
				<c:forEach items="${storeList }" var="seller">
					<option value="${seller.storeid }">${seller.title }</option>
				</c:forEach>
			</select>
			<button class="btn btn-success search-btn" onclick="query();">确定</button>
			<button class="btn btn-success search-btn" onclick="reset();">重置</button>
			<shiro:hasPermission name="bus:user:jifen:doExcel">
				<button onclick="doExcel();" class="btn btn-success pull-right">导出</button>
			</shiro:hasPermission>
			<div class="clearfix"></div>
		</div>
		<div class="col-lg-12 title-top">
			<div class="col-lg-12">
				<div class="text-muted single-line-text pull-left">
					共 <font color="#428bca" id="dataCount">0</font> 条记录
				</div>

				<!-- <div style="float:right;margin-right: 30px;">
						<div class="text-muted single-line-text pull-right"> &nbsp;&nbsp;<input type="radio" class="radioItem" id="state1" name="state" value="1" />
						 	积分&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" class="radioItem" id="state2" name="state" value="2" />
						   抵扣券&nbsp;&nbsp; &nbsp;&nbsp;<input type="radio" class="radioItem" id="state3" name="state" value="3" />惠券</div>
					</div> -->
			</div>
			<div class="table-responsive panel panel-default">
				<table id="dataTable" class="table table-hover table-bordered"
					style="overflow: scroll;">
					<thead>
						<tr>
							<th width="200px;">会员卡号</th>
							<th width="100px;">会员姓名</th>
							<th width="200px;">会员手机号</th>
							<th width="200px;">所属分公司</th>
							<th width="100px;">营业部</th>
							<th width="150px;">办卡日期</th>
							<th class="sort" width="100px;">积分 <a class="querySort">
									<i class="down"></i> <input type="radio" class="downSort"
									name="state" value="1" onclick="query1(1)" />
							</a> <a class="querySort"> <i class="down"></i> <input
									type="radio" name="state" value="2" class="upSort"
									onclick="query1(2)">
							</a>
							</th>
							<th class="sort" width="100px;">抵扣券 <a class="querySort">
									<i class="down"></i> <input type="radio" class="downSort"
									name="state" value="2" onclick="query1(3)" />
							</a> <a class="querySort"> <i class="down"></i> <input
									type="radio" name="state" value="2" class="upSort"
									onclick="query1(4)">
							</a>
							</th>
							<th class="sort" width="100px;">惠券 <a class="querySort">
									<i class="down"></i> <input type="radio" class="downSort"
									name="state" value="3" onclick="query1(5)" />
							</a> <a class="querySort"> <i class="down"></i> <input
									type="radio" name="state" value="2" class="upSort"
									onclick="query1(6)">
							</a>
							</th>
							<th width="100px;">积分明细</th>
						</tr>
					</thead>
					<tbody id="dataList"></tbody>
				</table>
			</div>
			<div class="col-lg-12">
				<ul id="dataPagination" class="pagination-sm pull-right"></ul>
			</div>
		</div>

	</div>
	<jsp:include page="../../include/javascripts.jsp"></jsp:include>
	<!-- 异步加载下一页数据后，用模板渲染 -->
	<script type="text/html" id="dataTpl">
		{{each list as item}}
				 <tr id="item{{item.id}}" data-id="{{item.id}}">
				 	<td>
						<a href="javascript:showUserDetail('{{item.id}}');"><font color="#40a9ff" id="dataCount">{{if item.card}}{{item.card }}{{/if}}
								{{if !item.card}}--{{/if}}
							</font>
						</a>
					</td>
					<td>{{item.name}}</td>
					<td>{{item.phone}}</td>
					<td>
						{{if item.toBossTwoId}}{{item.storeName}}{{/if}}
						{{if !item.toBossTwoId}}--{{/if}}
					</td>
					<td>
						{{if item.toBossOneId}}{{item.trueName}}{{/if}}
						{{if !item.toBossOneId}}--{{/if}}
					</td>
					<td>{{item.createDate}}</td>
					<td>{{item.sppoint}}</td>
					<td>{{item.jkpoint}}</td>
					<td>{{item.jypoint}}</td>
					<td>
						<a href="javascript:showUser('{{item.id}}');"><span class="btn">积分明细</span></a>
					</td>
				</tr>
		{{/each}}
</script>
	<script type="text/javascript">
var dataPaginator;
$(query);
function query(){
	 var phone=$("#sPhone").val(),card=$("#sCard").val(),store=$("#sStore").val();
	 var params = {
		pageSize:10,
		phone:phone,
		card:card,
		store:store
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/change/delivery/history",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
/**
 * 此排序与默认排序冲突故分成二方法
 */
function query1(index){
	 var phone=$("#sPhone").val(),card=$("#sCard").val(),store=$("#sStore").val();
	 var params = {
		pageSize:10,
		phone:phone,
		card:card,
		store:store,
		index:index
	};
	if(dataPaginator){
		dataPaginator.destroy();
	}
	dataPaginator = Kit.pagination("#dataPagination","${BASE_PATH}/bus/user/vippage1",params,function(result){
		//设置显示最新的数据数量
		$("#dataCount").html(result.object.totalRow);
		//根据模板渲染数据并填充
		$("#dataList").empty().append(template("dataTpl",result.object));
	});
}
function reset(){
	$("#sPhone").val("");$("#sCard").val("");$("#sStore").val("");$("#sStore").trigger("change");
}
//跳转页面
var showDialog;
function showUser(id){
	showDialog = Kit.dialog("会员积分详情信息","${BASE_PATH}/bus/user/detailVip/"+id,{size:'size-wide',closable:true}).open();
}
var showDialog;
function showUserDetail(id){
	showDialog = Kit.dialog("会员详情信息","${BASE_PATH}/bus/user/detail/"+id,{size:'size-wide',closable:true}).open();
}
function onEditSuccess(newObject){
	$("#item"+newObject.id).replaceWith(template("dataTpl",{"list":[newObject]}));
}
function doExcel(){
	 var phone=$("#sPhone").val(),card=$("#sCard").val(),store=$("#sStore").val();
	window.location.href="${BASE_PATH}/bus/user/doVipExcel?phone="+phone+"&card="+card+"&store="+store;
}
//订单量、收藏量、浏览量  单选图片点击切换
var querySort=document.getElementsByClassName("querySort");//点击区域
var down=document.getElementsByClassName("down");
for(var i=0;i<querySort.length;i++){
	   //给每个class添加id标识(当索引)区分每个class
	   querySort[i].id=i;	   
	   //鼠标点击改变背景图片偏移
	   querySort[i].onclick=function(){
		   //当前索引
		   var index=this.id;
		   for( j=0;j<down.length;j++){
			   down[j].style.backgroundPosition="0px 61px";
		   }
		 //改变索引为当前的class背景图片偏移位置
		   down[index].style.backgroundPosition="0px 21px";
	   }
}


 
</script>
</body>
</html>